<template>
    <div class="zy-content">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('公司')}}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.companyCode"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="paramsCompanySelectChange"
                >
                  <Option v-for="(item, index) of companyList"
                          :value="item.code"
                          :label="item.name"
                          :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('厂区')}}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.floorCode"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="paramsFactorySelectChange"
                >
                  <Option v-for="(item, index) of factoryLists"
                          :value="item.code"
                          :label="item.name"
                          :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('bigScreen.Line')}}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.areaCode"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                >
                  <Option v-for="(item, index) of productionLineLists"
                          :value="item.code"
                          :label="item.name"
                          :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('标题')}}</p>
              <div class="ipt">
                <Input
                    clearable
                    type="text"
                    v-model="searchParams.title"
                    :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder"
                    :maxlength="32"
                ></Input>
              </div>
            </div>
          </Col>


          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
                <Button
                    class="reset-btn"
                    @click="reset()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
         <div class="list-layout mt16">
           <div class="btns clear">
             <span class="title">{{ $t('common.listInformation') }}</span>
             <Button   @click="addClickinfo" v-has="'screenManagementAdd'">{{$t('common.New')}}</Button>
             <Button   @click="exportTemplateClick" v-has="'screenManagementExport'">{{ $t('common.batchExport') }}</Button>
             <Button   @click="importExcelShow" v-has="'screenManagementImport'">{{ $t('common.Import') }}</Button>
             <Button  @click="exportTemplate" v-has="'screenManagementDown'">{{ $t('preliminary.DownloadTemplate') }}</Button>
             <Button  @click="deleteAll" v-has="'screenManagementDeleteAll'">{{$t('common.batchDelete')}}</Button>
               <Button @click="getTableColumns(columns)">
                   {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
               </Button>
           </div>
           <div class="tableContent">
             <Table
                 class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList"
                 :data="dataSource"
                 @on-selection-change="onSelectChange"
             >
               <template slot-scope="{ row }" slot="action">
                    <span class="operationBtn" v-has="'screenManagementEdit'"
                          @click="addClickinfo(row)"><i class="iconfont zy-common-bianji"></i>{{ $t('common.Edit') }}</span>
                 <span
                     class="operationBtn"
                     v-has="'screenManagementDelete'"
                     @click="(deleteModal = true), (deleteIds = [row.id])"
                 ><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span
                 >
               </template>
             </Table>
           </div>
           <div class="pageWrap mt16">
             <pageLeftTitle :total="total" :selected="deleteIds.length" />
             <Page
                 :total="total"
                 :page-size="pageSize"
                 :page-size-opts="$variable.pageSizes"
                 :current="pageNum"
                 @on-change="changePageNum"
                 @on-page-size-change="changePageSize"
                 show-sizer
                 show-total
             />
           </div>
         </div>
        <Modal :mask-closable="false" v-model="addModal" :title="addtitle" class="modal-content-layout">
            <Form
                ref="formValidate"
                class="formList "
                :model="formItem"
                :rules="rules"
                label-position="top"
            >
                <FormItem :label="$t('公司')" prop="companyCode">
                    <Select
                        v-model="formItem.companyCode"
                        filterable
                        clearable
                        @on-change="companySelectChange"
                        :placeholder="`${$t('common.selectInfo')}`"
                    >
                        <Option v-for="(item, index) of companyList"
                                :value="item.code"
                                :label="item.name"
                                :key="index">
                        </Option>
                        >
                    </Select>
                </FormItem>
                <FormItem :label="$t('厂区')">
                    <Select
                        v-model="formItem.floorCode"
                        filterable
                        clearable
                        :placeholder="`${$t('common.selectInfo')}`"
                        @on-change="factorySelectChange"
                    >
                        <Option v-for="(item, index) of factoryList"
                                :value="item.code"
                                :label="item.name"
                                :key="index">
                        </Option>
                    </Select>
                </FormItem>
                <FormItem :label="$t('bigScreen.Line')">
                    <Select
                        v-model="formItem.areaCode"
                        filterable
                        clearable
                        :placeholder="`${$t('common.selectInfo')}`"
                    >
                        <Option v-for="(item, index) of productionLineList"
                                :value="item.code"
                                :label="item.name"
                                :key="index">
                        </Option>
                    </Select>
                </FormItem>
                <!--        <FormItem label="大屏级别：" prop="level">-->
                <!--          <Select-->
                <!--            v-model="formItem.level"-->
                <!--            filterable-->
                <!--            clearable-->
                <!--            placeholder="请选择大屏级别"-->
                <!--          >-->
                <!--            <Option-->
                <!--              v-for="(item, index) of classesList"-->
                <!--              :value="item.id"-->
                <!--              :key="index"-->
                <!--              >{{ item.name }}</Option-->
                <!--            >-->
                <!--          </Select>-->
                <!--        </FormItem>-->
                <FormItem :label="$t('中文标题')" prop="titleCN">
                    <Input
                        :placeholder="`${$t('common.inputInfo')}`"
                        type="text"
                        v-model="formItem.titleCN"
                    ></Input>
                </FormItem>
                <FormItem :label="$t('英文标题')" prop="titleEN">
                    <Input
                        :placeholder="`${$t('common.inputInfo')}`"
                        type="text"
                        v-model="formItem.titleEN"
                    ></Input>
                </FormItem>
                <FormItem :label="$t('链接')" prop="url">
                    <Input
                        :placeholder="`${$t('common.inputInfo')}`"
                        type="text"
                        v-model="formItem.url"
                    ></Input>
                </FormItem>
                <FormItem :label="$t('备注')">
                    <Input
                        :placeholder="`${$t('common.inputInfo')}`"
                        type="text"
                        v-model="formItem.remark"
                    ></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="addModal = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="handleSubmit('formValidate')">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="deleteModal" :title="$t('common.Delete')" class="modal-title-layout" >
          <div class="icon red">
            <i class="iconfont zy-common-shanchu"></i>
          </div>
          <p class="title">
            <span>{{$t('common.confirmDelete')}}</span>
          </p>
            <div slot="footer">
                <Button type="default" @click="deleteModal = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="handleDelete">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <importExcelModal
            :importExcelStateF="importExcelState"
            v-if="importExcelState"
            @importExcelChange="importExcelChange"
        ></importExcelModal>
    </div>
</template>

<script>
import fileDownload from "js-file-download";
import importExcelModal from "@/components/importExcel.vue";
import {findOrgByLevel, getCompany} from "@/api";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "faultClassify",
    components: {importExcelModal},
    mixins:[toggleTableOperation],
    data() {
        return {
            searchParams: {},
            faultName: '',
            faultCode: '',
            total: 0, // 总数
            pageNum: 1, // 页数
            pageSize: 10, // 每页的个数
            pageSizeOption: [10, 20, 30],
            addModal: false, // 新增弹窗
            addtitle: "", // 新增/编辑 标题
            formItem: {},
            rules: { // 校验规则
                level: [
                    {required: true, type: 'string', message: this.$t('common.selectInfo'), trigger: "change"},
                ],
                companyCode: [
                    {required: true, type: 'string', message: this.$t('common.selectInfo'), trigger: "change"},
                ],
                titleCN: [
                    {required: true, message: this.$t('common.inputInfo'), trigger: "blur"},
                ],
                titleEN: [
                    {required: true, message: this.$t('common.inputInfo'), trigger: "blur"},
                ],
                url: [
                    {required: true, message: this.$t('common.inputInfo'), trigger: "blur"},
                ],
            },
            classesList: [
                {id: 1, name: '终端'},
                {id: 2, name: '厂区'},
                {id: 3, name: '产线'},
            ],
            deleteModal: false, // 删除弹窗
            deleteIds: [], // 删除Id
            importExcelState: false, // 导入弹窗
            checkBtnPermission: {}, // 按钮权限
            columns: [
                {
                    key: "selection",
                    type: "selection",
                    width: 60,
                    align: "center",
                },
                {
                    title: `${this.$t('common.company')}`,
                    key: "companyName",
                    minWidth: 150,
                    align: "center",
                    resizable: true
                },
                {
                    // title: "厂区",
                    title: `${this.$t('厂区')}`,
                    key: "floorName",
                    minWidth: 120,
                    align: "center",
                    resizable: true
                },
                {
                    // title: "产线",
                    title: `${this.$t('bigScreen.Line')}`,
                    key: "areaName",
                    minWidth: 120,
                    align: "center",
                    resizable: true
                },
                // {
                //   title: "大屏级别",
                //   key: "largeLevelStr",
                //   align: "center",
                // },
                {
                    // title: "中文标题",
                    title: `${this.$t('中文标题')}`,
                    key: "titleCN",
                    minWidth: 250,
                    align: "center",
                    resizable: true
                },
                {
                    // title: "英文标题",
                    title: `${this.$t('英文标题')}`,
                    key: "titleEN",
                    minWidth: 300,
                    align: "center",
                    resizable: true
                },
                {
                    // title: "链接",
                    title: `${this.$t('链接')}`,
                    key: "url",
                    align: "center",
                    minWidth: 450,
                    resizable: true,tooltip: true,
                    render: (h, params) => {
                        return h(
                            "div", {
                                style: {
                                    color: '#0000FF',
                                    cursor: 'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.handleClickUrl(params.row.url)
                                    }
                                }
                            },
                            params.row.url || '--'
                        );
                    },
                },
                {
                    // title: "备注",
                    title: `${this.$t('备注')}`,
                    key: "remark",
                    minWidth: 150,
                    align: "center",
                    resizable: true
                },
                {
                    // title: "创建人",
                    title: `${this.$t('创建人')}`,
                    key: "createName",
                    minWidth: 150,
                    align: "center",
                    resizable: true
                },
                {
                    // title: "创建时间",
                    title: `${this.$t('创建时间')}`,
                    key: "createTime",
                    minWidth: 180,
                    align: "center",
                    resizable: true
                },
                {
                    title: `${this.$t('common.operation')}`,
                    minWidth: 200,
                    fixed:'right',
                    slot: "action",
                    align: "center",
                },
            ],
            dataSource: [],
            companyList: [],
            factoryList: [],
            productionLineList: [],
            productionLineLists: [],
            factoryLists: [],
        };
    },
    created() {

        this.getTableColumnsWidth(this.columns)

        this.getCompanyList();
        // this.getFactoryList();
        this.searchList();
    },
    methods: {
        handleClickUrl(url) {
            url && this.$router.push({path: url})
        },
        addClickinfo(row = {}) {

            if (row.id) {
                this.addtitle = `${this.$t('common.Edit')}`
                this.formItem = {
                    companyCode: row.companyCode,
                    floorCode: row.floorCode,
                    areaCode: row.areaCode,
                    titleCN: row.titleCN,
                    titleEN: row.titleEN,
                    url: row.url,
                    remark: row.remark,
                    id: row.id,
                };
                this.getFactoryList(this.formItem.companyCode, 'factoryList', () => {
                    this.getProductionLineList(this.formItem.floorCode, 'productionLineList')
                });

            } else {
                this.addtitle = `${this.$t('common.New')}`
                this.formItem = {}
                this.$refs['formValidate'].resetFields()
            }
            this.addModal = true;
        },
        // 新增提交
        handleSubmit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    const params = {
                        // level: this.formItem.level,
                        companyCode: this.formItem.companyCode,
                        floorCode: this.formItem.floorCode,
                        areaCode: this.formItem.areaCode,
                        titleCN: this.formItem.titleCN,
                        titleEN: this.formItem.titleEN,
                        url: this.formItem.url,
                        remark: this.formItem.remark,
                    };
                    if (this.formItem.id) params.id = this.formItem.id;
                    this.axios({
                        method: "post",
                        url: `/dms/large/screen/${
                            this.formItem.id ? "edit" : "add"
                        }`,
                        data: params,
                    }).then((res) => {
                        if (res.code === 200) {
                            this.addModal = false;
                            this.$Message.success(res.msg);
                            this.changeNum();
                        } else {
                            this.$Message.warning({
                                content: res.msg,
                                duration: 6,
                                closable: true,
                            });
                        }
                    });
                }
            });
        },
        // 删除操作
        handleDelete() {
            this.axios({
                method: "post",
                url: "/dms/large/screen/delete",
                data: this.deleteIds,
            }).then((res) => {
                if (res.code === 200) {
                    this.deleteModal = false;
                    this.$Message.success(res.msg);
                    this.changeNum();
                    this.deleteIds = []
                } else {
                    this.$Message.warning({
                        content: res.msg,
                        duration: 6,
                        closable: true,
                    });
                }
            });
        },
      reset(){
          this.searchParams = {};
          this.changeNum();
      },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        //查询列表
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                // title: this.searchParams.title,
                // level: this.searchParams.level,
                companyCode: this.searchParams.companyCode,
                floorCode: this.searchParams.floorCode,
                areaCode: this.searchParams.areaCode,
                titleCN: this.searchParams.title,
                // titleEn: this.searchParams.titleEn,
            };
            this.axios({
                method: "post",
                url: "/dms/large/screen/list",
                data: params,
            }).then((res) => {
                if (res.code === 200) {
                    this.dataSource = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.$Message.warning({
                        content: res.msg,
                        duration: 6,
                        closable: true,
                    });
                }
            });
        },
        onSelectChange(selection) {
            this.deleteIds = selection.map((item) => item.id);
        },
        //下载模板
        exportTemplate() {
            const filName = `${this.$t('大屏管理')}${this.$t('common.Download')}`;
            this.axios({
                method: "get",
                url: "/dms/large/screen/exportTemplate",
                responseType: "blob",
            }).then((res) => {
                fileDownload(res, filName + ".xlsx");
            });
        },
        //导出
        exportTemplateClick() {
            let params = {
                companyCode: this.searchParams.companyCode,
                floorCode: this.searchParams.floorCode,
                areaCode: this.searchParams.areaCode,
                titleCN: this.searchParams.title,
                ids: this.deleteIds,
            };
            const filName = this.$t('大屏管理');
            this.axios({
                method: "post",
                url: "/dms/large/screen/export",
                responseType: "blob",
                data: params,
            }).then((res) => {
                fileDownload(res, filName + ".xlsx");
            });
        },
        /*导入*/
        importExcelShow() {
            this.importExcelState = true;
        },
        importExcelChange(val) {
            this.importExcelState = false;
            if (val === "success") {
                // this.$Message.success("导入成功");
                this.changeNum();
            }
        },
        // 批量删除
        deleteAll() {
            if (this.deleteIds.length == 0) {
                this.$Message.warning({
                    content:`${ this.$t('common.deleteItems') }`,
                    duration: 6,
                    closable: true,
                });
                return;
            } else {
                this.deleteModal = true;
            }
        },
        //获取公司
        getCompanyList() {
            findOrgByLevel({level: 2}).then(res => {
                if (res.code === 200) {
                    this.companyList = res.data
                } else {
                    this.companyList = []
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getFactoryList(code, listKey, callback) {

            const obj = this.companyList.find(item => item.code === code)
            let params = {
                level: 3,
                parentId: obj.id
            }
            findOrgByLevel(params).then(res => {
                if (res.code === 200) {
                    this[listKey] = res.data
                    if (typeof callback === 'function')
                        callback()
                } else {
                    this[listKey] = []
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getProductionLineList(floorCode, listKey) {
            const obj = (listKey === 'productionLineList' ? this.factoryList : this.factoryLists).find(item => item.code === floorCode)
            if (!obj.id) {
                this[listKey] = [];
                return;
            }
            let params = {
                level: 4,
                parentId: obj.id
            }
            findOrgByLevel(params).then(res => {
                if (res.code === 200) {
                    this[listKey] = res.data
                } else {
                    this[listKey] = []
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            }).finally(() => {
                this.loading = false
            })
        },
        factorySelectChange() {
            if (this.formItem.floorCode)
                this.getProductionLineList(this.formItem.floorCode, 'productionLineList');
            else {
                this.productionLineList = []
                this.formItem.areaCode = ''
            }
        },
        paramsFactorySelectChange() {
            if (this.searchParams.floorCode)
                this.getProductionLineList(this.searchParams.floorCode, 'productionLineLists');
            else {
                this.productionLineLists = []
                this.searchParams.areaCode = ''
            }
        },
        paramsCompanySelectChange() {

            if (this.searchParams.companyCode)
                this.getFactoryList(this.searchParams.companyCode, 'factoryLists');
            else {
                this.productionLineLists = []
                this.searchParams.floorCode = ''
            }
        },
        companySelectChange() {
            if (this.formItem.companyCode)
                this.getFactoryList(this.formItem.companyCode, 'factoryList');
            else {
                this.factoryList = []
                this.formItem.floorCode = ''
            }
        }
    },
};
</script>

<style scoped lang="scss">
</style>


